<template>
	<view class="app-discuss-add" :style="[AppSkinVar]">
		<view class="e-p-t-30 e-p-b-30">
			<view class="e-p-30 bg-white">
				<view class="e-flex e-flex-between e-rela" @tap="pickerShow = true">
					<view class="e-font-32" :class="{'c-regular':!className}">
						{{className || $t('discuss.tips1')}}
					</view>
					<image :src="$staticPath('layout/basics/right_arrow.png')" class="img-36"></image>
				</view>
			</view>

		</view>
		<view class="e-m-b-30">
			<view class="app-discuss-add__textarea e-p-30 bg-white e-rela">
				<textarea class="e-font-32" v-model="form.title" maxlength="20" :placeholder="$t('discuss.tips2')" />
				<text class="app-discuss-add__textarea-length c-secondary e-abso">{{form.title.length}}/20</text>
			</view>
		</view>
		<view class="bg-white e-p-30 e-m-b-30">
			<view class="app-discuss-add__editor">
				<appEditor :value="form.content" @input="handlerEditorInput" :placeholder="$t('discuss.tips3')">
				</appEditor>
			</view>

		</view>
		<view class="bg-white e-p-30">
			<upload ref="upload" width="144rpx" height="146rpx" :uploadIcon="$staticPath('user/upload.png')"
				:text="$t('discuss.tips4')"></upload>
		</view>
		<view class="app-discuss-add__btn bg-white e-flex">
			<view class="e-flex-xy-center e-flex-1 bg-primary" @tap="submit">
				<text class="c-white e-font-32">{{$t('discuss.fb')}}</text>
			</view>
		</view>
		<e-picker :show="pickerShow" ref="uPicker" keyName="name" :columns="classifyList" :cancelText="$t('common.取消')"
			:confirmText="$t('common.确认')" @cancel="pickerShow = false" @confirm="confirm"></e-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getDiscussClassify,
		postAddDiscuss
	} from '@/common/request/api'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {throttle} from '@/common/utils'
	import appEditor from '../child/appEditor'
	const ctx = useCurrentInstance()
	const className = ref('')
	const pickerShow = ref(false)
	const classifyList = ref([])
	const form =  ref({
		forumClassId: '',
		title: '',
		content: '',
		images: ''
	})
	
	const confirm = ({
		value
	}) => {
		className.value = value[0].name
		form.value.forumClassId = value[0].id
		pickerShow.value = false
	}
	const handlerEditorInput = (e) => {
		form.value.content = e.html
	}
	
	const submit = throttle(function () {
		if (!className.value) {
			ctx.$toastApp(ctx.$t('discuss.tips1'))
			return
		}
		if (!form.value.title) {
			ctx.$toastApp(ctx.$t('discuss.tips2'))
			return
		}
		if (!form.value.content) {
			ctx.$toastApp(ctx.$t('discuss.tips3'))
			return
		}
		let images = ctx.$refs.upload.imgList.map(item => item.url).join(',')
		if (!images) {
			ctx.$toastApp(ctx.$t('discuss.tips5'))
			return
		}
		form.value.images = images
		postAddDiscuss(form.value).then(res => {
			ctx.$toastApp(res.msg)
			if (res.code === 200) {
				setTimeout(() => {
					ctx.$back()
				}, 200)
			}
		})
	},1000)
	
	onLoad(() => {
		getDiscussClassify().then(res => {
			if (res.code === 200) {
				if (res.data && res.data.length) {
					classifyList.value = [res.data]
				}
			}
		})
	})

</script>

<style>
	page {

		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.app-discuss-add {
		padding-bottom: 180rpx;

		&__textarea {
			textarea {
				height: 88rpx;
			}

			&-length {
				right: 30rpx;
				bottom: 30rpx
			}
		}

		&__editor {
			height: 858rpx
		}

		&__btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 30rpx;
			height: 140rpx;

			>view {
				height: 100rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>
